<template>
  <el-row class="tac">
    <el-col :span="24" style="height:100%">
      <el-menu unique-opened :default-active="store.state.tabIndex" @open="handleOpen" @close="handleClose"
        class="el-menu-vertical-demo" @select="select" :collapse="isCollapse">
        <template :key="item.key + index" v-for="(item, index) in menuList">
          <el-sub-menu
            v-if="item.children && (Array.isArray(item.children) ? item.children.length : Object.keys(item.children).length)"
            :index="item.key">
            <template #title>
              <el-icon v-if="item.icon">
                <component :is="item.icon" :color="iconColor(item.color)" />
              </el-icon>
              <span>{{ $t('menu.' + item.name) }}</span>
            </template>
            <template v-if="Array.isArray(item.children)">
              <el-menu-item v-for="(ite, ind) in item.children" :key="ite.name + ind" :index="ite.key">
                <el-icon v-if="ite.icon">
                  <component :is="ite.icon" :color="iconColor(ite.color)" />
                </el-icon>
                <template v-if="!isCollapse" #title>{{ $t('menu.' + ite.name) }}</template>
              </el-menu-item>
            </template>
            <template v-else>
              <el-menu-item-group v-for="(ite, ind) in Object.keys(item.children)" :title="ite" :key="ite + ind">
                <el-menu-item v-for="(it, ind) in item.children[ite]" :key="it.name + ind" :index="it.key">
                  <el-icon v-if="it.icon">
                    <component :is="it.icon" :color="iconColor(it.color)" />
                  </el-icon>
                  <template #title>{{ $t('menu.' + it.name) }}</template>
                </el-menu-item>
              </el-menu-item-group>
            </template>
          </el-sub-menu>
          <el-menu-item v-else :index="item.key">
            <el-icon v-if="item.icon">
              <component :is="item.icon" :color="iconColor(item.color)" />
            </el-icon>
            <template #title>{{ $t('menu.' + item.name) }}</template>
          </el-menu-item>
        </template>
      </el-menu>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { inject, reactive, watch } from 'vue';
import { useStore } from 'vuex'
import config from '@/config/projectOptions'
import router from '@/router';


const isCollapse = inject<{ value: Boolean }>("isCollapse")
const store = useStore()
const handleOpen = () => { }
const handleClose = () => { }
const menuList = reactive(config.menuList)
watch(() => isCollapse?.value, (e) => {
  store.commit('setIsCollapse', e)
})
/* 默认打开menu */
/* 节流 与动画持续时间相同 否则报错 */
var x: number | null = null
const select = (value: string, routePath: any) => {
  if (x) clearTimeout(x)
  x = window.setTimeout(() => {
    router.push(value)
    // store.commit('setTabIndex', value)
    // store.commit('setRouterPath', routePath)
    console.log(routePath);
    x = null
  }, 400);
}
const iconColor = (value: string | undefined): string => {
  return value ? value : (store.state.displayMode == 'dark' ? '#fff' : '#797979')
}
</script>
<style lang="scss" scoped>
.tac {
  height: 100%;
}

span {
  display: flex;
  align-items: center;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  max-width: 40vw;
  width: 230px;
  min-height: 400px;
  height: 100%;
}

.el-menu--collapse {
  height: 100%;
}

.el-aside {
  // 侧边栏折叠动画速度
  transition: width 0.25s;
  -webkit-transition: width 0.25s;
  -moz-transition: width 0.25s;
  -webkit-transition: width 0.25s;
  -o-transition: width 0.25s;
}
</style>
